<template>
  <view class="setting">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="设置"></van-nav-bar>
    <!-- #endif -->
    <view class="setting-cnt">
      <view
        class="list-wrap"
        v-for="(item, index) in data.setList"
        :key="index"
        @tap="clickUrl(item)">
        <view class="left">
          <view class="titleName">{{ item.titleName }}</view>
        </view>
        <view class="right">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    <view class="bottom-wrap" :style="styleBntH">
      <button class="bnt-wrap bnt" @tap="submit">退出登录</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getSystemInfo, clearToken, clearUserId, systemInfo, setToastInstance } from '@mixins/info';
import { loginOut } from '@/service/apis/mine';
import { getItem } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const $toast: any = inject('$Toast');

const styleBntH = `height: calc(124rpx + ${getSystemInfo().safeBottom}px)`;
let info = reactive({
  accountNumber: '',
});

let data = reactive({
  setList: [
    {
      titleName: '用户协议',
      linkUrl: '',
    },
    // {
    //   titleName: '安全设置',
    //   linkUrl: '/pagesMyCenter/setting/security',
    // },
    {
      titleName: '注销账户',
      linkUrl: '',
    },
  ],
});

onLoad((option: any) => {
  console.log('option=====', option);
  info.accountNumber = option.accountNumber;
  data.setList[1].linkUrl = `/pagesMyCenter/setting/logOut?accountNumber=${info.accountNumber}`;
});

const clickUrl = (item: any) => {
  console.log(item);
  if (item.titleName == '用户协议') {
    const url = `${import.meta.env.VITE_VUE_APP_RES}${
      import.meta.env.VITE_VUE_APP_AGREEMENT
    }agreement-user.html`;
    uni.navigateTo({
      url: `/pagesMain/webView/webView?url=${url}`,
    });
  } else {
    uni.navigateTo({
      url: item.linkUrl,
    });
  }
};

const submit = () => {
  loginOut({}, { account: { accountId: getItem('userid') } }).then((res: any) => {
    // if (res) {
    clearToken();
    clearUserId();
    $toast('退出登录成功');
    uni.reLaunch({
      url: '/pages/login/login',
    });
    // }
  });
};

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss">
page {
  background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.setting {
  background-color: #fff;
  &-cnt {
    padding: 0 16px;
  }
  .list-wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 0;

    .left {
      text-align: left;
      width: 63%;
      .my-notice-tips {
        width: 4px;
        height: 4px;
        background: #d0021b;
        border-radius: 50%;
      }
      .titleName {
        font-size: 16px;
        color: #242424;
        font-weight: 500;
        overflow: hidden; /* 移除隐藏 */
        text-overflow: ellipsis; /* 省略号 */
        white-space: nowrap; /* 禁止文字自动换行 */
      }
    }
    .right {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
      padding-left: 20px;
      text-align: right;
      color: #202124;
      overflow: hidden; /* 移除隐藏 */
      white-space: nowrap; /* 禁止文字自动换行 */
      color: #858585;
    }
  }
  .bottom-wrap {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #f2f2f2;
    box-sizing: border-box;
    .bnt {
      height: 44px;
      width: 343px;
      margin-top: 9px;
      border-radius: 50px;
    }
  }
}
</style>
